<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结算页面</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/font-awesome.css" />
    <link rel="stylesheet" href="css/notifications/Lobibox.min.css">
    <script src="js/vue.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/notifications/Lobibox.js"></script>
    <script src="js/jquery.cookie.min.js"></script>
<!--    <script src="js/loginStatus.js"></script>-->
    <style>
        .navbar-text a  {
            color: #ffffff;
        }
        .login-text {
            margin-right: 50px;
        }
        h4.title {
            font-weight: 800;
        }
        .mgl30 {
            margin-left: 30px;
        }
        #allAddressTable a {
            display: none;
        }
        /** 当鼠标划到 tr上的时候，让它下面的 a标签展示 */
        #allAddressTable tr:hover a{
            display: inline-block;
        }

    </style>
</head>
<body>
    <nav class="navbar navbar-default navbar-inverse navbar-static-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <a href="前端首页.html" class="navbar-brand" style="color: #ffffff;"><i class="fa fa-sign-language"></i> 寻欢易购</a>
            </div>
            <p class="navbar-text navbar-right login-text">
                <a id="loginText" href="登录页面.html">登录</a>
            </p>
            <p class="navbar-text navbar-right">
                <a href="仿京东注册.html">注册</a>
            </p>
        </div>
    </nav>
    <div class="container-fluid>
        <div class="row">
            <div class="col-xs-8 col-xs-push-2">
                <h4 class="title">收货人信息</h4>
                <p id="pp" class="alert alert-danger">
                    <input type="hidden" id="takeDeliveryAddressId">
                    <span style="font-weight: 800;">刘德华</span>
                    <span class="mgl30">广东省广州市天河区元岗路200号</span>
                    <span class="mgl30">13400000000</span>
                </p>
                <a data-toggle="collapse" href="#moreAddress">更多地址</a>

                <div class="collapse"  id="moreAddress" style="margin-top: 15px;">
                    <table id="allAddressTable" class="table">
                        <tr>
                            <td>
                                刘德华
                            </td>
                            <td>广东省广州市天河区元岗路200号</td>
                            <td>13400000000</td>
                            <td style="width: 130px;">
                                <a href="javascript: void(0);" onclick="setTakeDeliveryAddress(this)">设为收货地址</a>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                张学友 <span class="label label-success">默认</span>
                            </td>
                            <td>广东省广州市天河区元岗路200号</td>
                            <td>13400000000</td>
                            <td style="width: 130px;">
                                <a href="javascript: void(0);" onclick="setTakeDeliveryAddress(this)">设为收货地址</a>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-8 col-xs-push-2">
                <h4 class="title">送货清单</h4>
                <table class="table">
                    <thead>
                        <tr>
                            <td>商品</td>
                            <td>单价</td>
                            <td>数量</td>
                        </tr>
                    </thead>
                    <tbody >
                        <tr>
                            <td style="max-width: 200px;">
                                <div class="media">
                                    <div class="media-left">
                                        <a href="javascript: void(0);">
                                            <img class="media-object" height="80px" width="62px" src="http://localhost/mobile/apple.jpg">
                                        </a>
                                    </div>
                                    <div class="media-body">
                                        <h4 class="media-heading">电脑</h4>
                                    </div>
                                </div>
                            </td>
                            <td>5099</td>
                            <td>2</td>
                        </tr>
                        <tr>
                            <td style="max-width: 200px;">
                                <div class="media">
                                    <div class="media-left">
                                        <a href="javascript: void(0);">
                                            <img class="media-object" height="80px" width="62px" src="http://localhost/shoes/fila.jpg">
                                        </a>
                                    </div>
                                    <div class="media-body">
                                        <h4 class="media-heading">手机</h4>
                                    </div>
                                </div>
                            </td>
                            <td>3099</td>
                            <td>1</td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr v-if="goods.length != 0" style="text-align: right;">
                            <td colspan="5">
                                总计：50000 <button onclick="ensureOrder()" class="btn btn-danger">确认订单</button>
                            </td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
    <div class="modal" id="payModal" data-backdrop="static">
        <div class="modal-dialog" style="margin-top: 120px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button onclick="destoryPayModal()" class="close">
                        <span>&times;</span>
                    </button>
                    <h3 class="modal-title">支付信息</h3>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="orderNo">
                    <h4 style="font-weight: 800;"><span>应付金额: </span>￥<span style="color: red;" id="totalPrice">5600</span></h4>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" onclick="destoryPayModal()">取消支付</button>
                    <button type="button" onclick="confirmPay()" class="btn btn-success">确认支付</button>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    function ensureOrder() {
        $('#payModal').modal('show');
    }

</script>
</html>